/**
 * SPDX-FileCopyrightText: 2023-2025 Sangfor Technologies Inc.
 * SPDX-License-Identifier: Mulan PSL v2
 */
<template>
    <div class="sfv-cascade-nav-menu"
         :class="{'sfv-cascade-nav-menu-hover': isNavBarHover}"
         :style="menuStyle">
        <div class="sfv-cascade-nav-menu-bar-wrapper">
            <div class="sfv-cascade-nav-menu-bar"
                 :class="{'sfv-cascade-nav-menu-hover': isNavBarHover}">
                <div class="sfv-cascade-nav-menu_title">
                    <div class="sfv-cascade-nav-menu_logo">
                        <slot name="logo">
                            <div class="default-sangfor-logo">
                            </div>
                        </slot>
                    </div>
                    <div
                        :title="productName"
                        class="sfv-cascade-nav-menu_title-text sfv-ellipsis">
                        {{ productName }}
                    </div>
                </div>
                <div class="sfv-cascade-nav-menu_body">
                    <sf-scrollbar class="sfv-cascade-nav-menu_body-nav">
                        <sf-nav-menu ref="navMenu" :default-active="activeIndex" :options="cascadeOptions"/>
                    </sf-scrollbar>
                    <div class="sf-cascade-nav-menu_bottom-nav">
                        <slot name="bottom-nav"></slot>
                    </div>
                    <div v-if="bottomHotSpot"
                         class="sfv-cascade-nav-menu_hover"
                         @click="barMouseEnter">
                        <i class="sf-comp-iconfont icon-comp-menu-collapse"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<style scoped lang="less">
/deep/ .sfv-nav-menu_content {
    color: #fff;
    
    .sfv-nav-menu-list-item--active {
        background: #204ED9 !important;
    }
    
    .sfv-nav-menu-list-item {
        padding: 0 !important;
        
        .sfv-nav-menu-list-item_content {
            color: #fff;
        }
        
        .sfv-nav-menu-list-item_icon-wrapper {
            min-width: 56px;
            text-align: center;
            color: #fff !important;
            
            .sfv-nav-menu-list-item_icon {
                color: #fff !important;
            }
        }
    }
    
    .sfv-nav-sub-menu {
        .sfv-nav-sub-menu_title {
            padding: 0 !important;
        }
        
        .sfv-nav-sub-menu_title_icon-wrapper {
            min-width: 56px;
            text-align: center;
            color: #fff !important;
        }
        
        .sfv-nav-menu-list-item_content {
            margin-left: 10px;
        }
    }
}
</style>

<script>

/**
 * 级联导航：适用于将顶部和左侧导航改为只有左侧导航的场景
 * Created by ued on 2020/05/30.
 */

// import CascadeNavMenuItem from './cascade_nav_menu_item.vue';

export default {
    name: 'SfCascadeNavMenu',
    
    components: {
        // CascadeNavMenuItem
    },
    
    props: {
        
        // 启用底部热点区域
        bottomHotSpot: {
            type: Boolean,
            default: true
        },
        
        // 和nav-menu的options配置一致
        cascadeOptions: {
            type: Array,
            default() {
                return [];
            }
        },
        
        // 产品名
        productName: {
            type: String,
            default: ''
        },
        
        // 控制导航条右侧二级导航是否显示
        navMenuShow: {
            type: Boolean,
            default: false
        },
        
        // 和nav-menu的options配置一致
        options: {
            type: Array,
            default() {
                return [];
            }
        },
        
        // nav-menu 标题
        title: {
            type: String,
            default: ''
        },
        
        // nav-menu的总高度
        menuHeight: {
            type: [Number, String],
            default: 770
        }
        
    },
    
    watch: {
        // 监听路由是否发生变化，如果发生变化，设置路由对应的一级导航项高亮
        '$route'({path}) {
            const navPath = path.split('/');
            let pathStr = '/home'
            if (navPath.length >= 3) {
                if (navPath[1] === 'project_manager') {
                    pathStr = path;
                } else {
                    pathStr = `/${navPath[1]}/${navPath[2]}`
                }
            } else {
                pathStr = `/${navPath[1]}`;
            }
            this.activeIndex = pathStr;
        }
    },
    
    computed: {
        menuStyle: function () {
            return {
                'height': typeof this.menuHeight === 'number' ? this.menuHeight + 'px' : this.menuHeight
            };
        }
    },
    
    data() {
        return {
            isNavBarHover: true,
            activeIndex: '/home'
        };
    },
    
    methods: {
        
        // 点击右侧二级导航item
        autoMenuClickFn(e, item, data) {
            this.$emit('click-item', e, item, data);
        },
        
        // 点击水平展开收缩按钮
        horizontalExpandClickFn(v, item) {
            this.$emit('horizontal-expand-click', v, item);
        },
        
        // 点击左侧导航条item
        clickBarItem(e, data) {
            this.$emit('click-bar-item', e, data);
        },
        
        barMouseEnter() {
            this.isNavBarHover = !this.isNavBarHover;
        }
        
    }
};
</script>

